<template>
    <el-dialog v-model="dialogFormVisible" :title="title" @close="closeDialog">
        <el-form :model="addApprovalInvoiceItemForm" ref="addApprovalInvoiceItemRef" :rules="addApprovalInvoiceItemrules">
                        <el-form-item label="发票id" :label-width="formLabelWidth"
                                      prop="invoiceId" v-if="addApprovalInvoiceItemForm.id">
                            <el-input
                                    v-model="addApprovalInvoiceItemForm.invoiceId"
                                    autocomplete="off"
                                    ref="name"
                                    placeholder="请填写发票id"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="行数" :label-width="formLabelWidth"
                                      prop="lineNo" v-if="addApprovalInvoiceItemForm.id">
                            <el-input
                                    v-model="addApprovalInvoiceItemForm.lineNo"
                                    autocomplete="off"
                                    ref="name"
                                    placeholder="请填写行数"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="名称" :label-width="formLabelWidth"
                                      prop="name">
                            <el-input
                                    v-model="addApprovalInvoiceItemForm.name"
                                    autocomplete="off"
                                    ref="name"
                                    placeholder="请填写名称"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="规则型号" :label-width="formLabelWidth"
                                      prop="spec">
                            <el-input
                                    v-model="addApprovalInvoiceItemForm.spec"
                                    autocomplete="off"
                                    ref="name"
                                    placeholder="请填写规则型号"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="单位" :label-width="formLabelWidth"
                                      prop="unit">
                            <el-input
                                    v-model="addApprovalInvoiceItemForm.unit"
                                    autocomplete="off"
                                    ref="name"
                                    placeholder="请填写单位"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="数量" :label-width="formLabelWidth"
                                      prop="quantity" v-if="addApprovalInvoiceItemForm.id">
                            <el-input
                                    v-model="addApprovalInvoiceItemForm.quantity"
                                    autocomplete="off"
                                    ref="name"
                                    placeholder="请填写数量"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="单价" :label-width="formLabelWidth"
                                      prop="unitPrice" v-if="addApprovalInvoiceItemForm.id">
                            <el-input
                                    v-model="addApprovalInvoiceItemForm.unitPrice"
                                    autocomplete="off"
                                    ref="name"
                                    placeholder="请填写单价"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="金额" :label-width="formLabelWidth"
                                      prop="amountWithoutTax" v-if="addApprovalInvoiceItemForm.id">
                            <el-input
                                    v-model="addApprovalInvoiceItemForm.amountWithoutTax"
                                    autocomplete="off"
                                    ref="name"
                                    placeholder="请填写金额"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="税率" :label-width="formLabelWidth"
                                      prop="taxRate" v-if="addApprovalInvoiceItemForm.id">
                            <el-input
                                    v-model="addApprovalInvoiceItemForm.taxRate"
                                    autocomplete="off"
                                    ref="name"
                                    placeholder="请填写税率"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="税额" :label-width="formLabelWidth"
                                      prop="taxAmount" v-if="addApprovalInvoiceItemForm.id">
                            <el-input
                                    v-model="addApprovalInvoiceItemForm.taxAmount"
                                    autocomplete="off"
                                    ref="name"
                                    placeholder="请填写税额"
                            ></el-input>
                        </el-form-item>
        </el-form>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel()">取消</el-button>
        <el-button type="primary" @click="save()">保存</el-button>
      </span>
        </template>
    </el-dialog>
</template>

<script>
    import {ref} from "vue";
    import {httpService} from "@/utils/httpService";
    import {ElMessage, ElForm} from "element-plus";
    import {vxRule} from "@/utils/validator";

    export default {
        name: "AddApprovalInvoiceItem",
        components: {ElForm, ElMessage},
        data() {
            return {
                dialogFormVisible: ref(false),
                formLabelWidth: "120px",
                title: "",
                personnelType: "",
                addApprovalInvoiceItemForm: {
                    invoiceId: "",
                    lineNo: "",
                    name: "",
                    spec: "",
                    unit: "",
                    quantity: "",
                    unitPrice: "",
                    amountWithoutTax: "",
                    taxRate: "",
                    taxAmount: "",
                },
                // 校验规则
                addApprovalInvoiceItemrules: {
                    name: vxRule(true, null, "blur"),
                    spec: vxRule(true, null, "blur"),
                    unit: vxRule(true, null, "blur"),
                },
            };
        },
        methods: {
            closeDialog() {
                this.clear();
            },
            cancel() {
                this.dialogFormVisible = false;
                this.clear();
            },
            getApprovalInvoiceItemById(id) {
                httpService("/api/approvalInvoiceItem/queryById", {id: id}, "get").then(
                    (data) => {
                        this.addApprovalInvoiceItemForm = data;
                    }
                );
            },
            clear() {
                this.dialogFormVisible = false;
                //清空form
                    this.addApprovalInvoiceItemForm.id = "";
                    this.addApprovalInvoiceItemForm.invoiceId = "";
                    this.addApprovalInvoiceItemForm.lineNo = "";
                    this.addApprovalInvoiceItemForm.name = "";
                    this.addApprovalInvoiceItemForm.spec = "";
                    this.addApprovalInvoiceItemForm.unit = "";
                    this.addApprovalInvoiceItemForm.quantity = "";
                    this.addApprovalInvoiceItemForm.unitPrice = "";
                    this.addApprovalInvoiceItemForm.amountWithoutTax = "";
                    this.addApprovalInvoiceItemForm.taxRate = "";
                    this.addApprovalInvoiceItemForm.taxAmount = "";
            },
            save() {
                this.$refs.addApprovalInvoiceItemRef.validate((valid) => {
                    if (valid) {
                        let params = new FormData(); //创建一个form对象,必须是form对象否则后端接受不到数据
                        params.append("invoiceId", this.addApprovalInvoiceItemForm.invoiceId);
                        params.append("lineNo", this.addApprovalInvoiceItemForm.lineNo);
                        params.append("name", this.addApprovalInvoiceItemForm.name);
                        params.append("spec", this.addApprovalInvoiceItemForm.spec);
                        params.append("unit", this.addApprovalInvoiceItemForm.unit);
                        params.append("quantity", this.addApprovalInvoiceItemForm.quantity);
                        params.append("unitPrice", this.addApprovalInvoiceItemForm.unitPrice);
                        params.append("amountWithoutTax", this.addApprovalInvoiceItemForm.amountWithoutTax);
                        params.append("taxRate", this.addApprovalInvoiceItemForm.taxRate);
                        params.append("taxAmount", this.addApprovalInvoiceItemForm.taxAmount);
                        if (this.addApprovalInvoiceItemForm.id) {
                            params.append("id", this.addApprovalInvoiceItemForm.id);
                            httpService("/api/approvalInvoiceItem/edit", params, "post").then(
                                (data) => {
                                    if (data.code == 200) {
                                        ElMessage.success("修改成功");
                                        this.clear();
                                        //刷新父组件的数据
                                        this.$parent.getApprovalInvoiceItemList();
                                    } else {
                                        ElMessage.error("修改失败");
                                    }
                                }
                            );
                        } else {
                            httpService("/api/approvalInvoiceItem/add", params, "post").then(
                                (data) => {
                                    if (data.code == 200) {
                                        ElMessage.success("添加成功");
                                        this.clear();
                                        //刷新父组件的数据
                                        this.$parent.getApprovalInvoiceItemList();
                                    } else {
                                        ElMessage.error("添加失败");
                                    }
                                }
                            );
                        }
                    } else {
                        return false;
                    }
                });
            },
        },
    };
</script>
<style>
</style>